// fade in down
.fadeInDown-enter-from,
.fadeInDown-leave-to {
  opacity: 0;
  transform: translateY(15px);
}

.fadeInDown-enter-active,
.fadeInDown-leave-active {
  transition: all 0.3s;
}

.fadeInDown-enter-to,
.fadeInDown-leave-from {
  opacity: 1;
  transform: translateY(0);
}

// slideInRight transition
.slideInRight-enter-from,
.slideInRight-leave-to {
  transform: translateX(100%);
}

.slideInRight-enter-active,
.slideInRight-leave-active {
  transition: all 0.3s;
}

.slideInRight-leave-from,
.slideInRight-enter-to {
  transform: translateX(0);
}

// slideInRight transition
.slideInLeft-enter-from,
.slideInLeft-leave-to {
  transform: translateX(-100%);
}

.slideInLeft-enter-active,
.slideInLeft-leave-active {
  transition: all 0.3s;
}

.slideInLeft-leave-from,
.slideInLeft-enter-to {
  transform: translateX(0);
}

// fadeIn transition
.fadeIn-enter-from,
.fadeIn-leave-to {
  opacity: 0;
}

.fadeIn-enter-active,
.fadeIn-leave-active {
  transition: all 0.3s;
}

.fadeIn-leave-from,
.fadeIn-enter-to {
  opacity: 1;
}

// slideDown transition
.slideDown-enter-from,
.slideDown-leave-to {
  transform: translateY(-100%);
}

.slideDown-enter-active,
.slideDown-leave-active {
  transition: all 0.3s;
}

.slideDown-enter-to,
.slideDown-leave-from {
  transform: translateY(0);
}

// slideUp transition
.slideUp-enter-from,
.slideUp-leave-to {
  transform: translateY(100%);
}

.slideUp-enter-active,
.slideUp-leave-active {
  transition: all 0.3s;
}

.slideUp-leave-from,
.slideUp-enter-to {
  transform: translateY(0);
}

// height-autoplay transition
.heightAuto-enter-from,
.heightAuto-leave-to {
  height: 0;
}

.heightAuto-enter-active,
.heightAuto-to-active {
  transition: all .3s;
}
.heightAuto-leave-from,
.heightAuto-enter-to {
 height: 300px;
}
